<!-- 首页一键登录 -->
<template>
    <view class="login-box">
        <view class="top-one-click-login-box">
            <view @click="jumpLoginFn(item)" v-for="item in state.loginList" :key="item.id">{{ item.name }}</view>
        </view>
        <view class="top-slogn-box">
            <view class="top-slogn">
                你好，
            </view>
            <text>欢迎来到媛世界</text>
        </view>
        <view class="mobile-number">
            <text>{{ loginPhone }}</text>
            <view>中国移动提供认证服务</view>
        </view>
        <van-button type="primary" class="mobile-login-btn" @click="loginFn()">立即登录</van-button>
        <view class="agreement-box">
            <view class="agreement-text" @click="checkFn">
                <img :src="state.isCheck ? icon01 : icon02">
                <view class="agreement-right">
                    <text>我已阅读并同意</text><text class="text-box">中国移动认证条款</text> 和<text class="text-box"
                        v-for="item in state.agreementList" :key="item.id" @click.stop="jumpFn(item)">{{ item.name }}</text>
                </view>
            </view>
        </view>
    </view>
</template>

<script setup>
import { reactive, ref, getCurrentInstance, onMounted } from "vue"
import icon01 from "@/assets/image/icon01.png"
import icon02 from "@/assets/image/icon02.png"

import { getAuthorization, setAuthorization } from "@/utils/auth.js"

const state = reactive({
    loginList: [
        {
            id: 1,
            name: "注册",
            url: "/pages/register/index"
        },
        {
            id: 2,
            name: "其它手机号登录",
            url: "/pages/login/mobileNumberLogin/index"
        }
    ],
    agreementList: [
        {
            id: 2,
            name: "《媛世界用户协议》",
            url: "https://www.ysjcp.com/UserUseAgreement.html"
        },
        {
            id: 3,
            name: "《媛世界隐私条款》",
            url: "https://www.ysjcp.com/PrivacyAgreement.html"
        }
    ],
    mobileNumber: "",
    isCheck: false,
})

const checkFn = () => {
    state.isCheck = !state.isCheck
}

// 获取token
const getPhoneToken = () => {
    window.JVerificationInterface.init({
        appkey: "8d8b656b1b52e95dc08cb3b8", // 极光官网中创建应用后分配的 appkey，必填
        debugMode: true, // 设置是否开启 debug 模式。true 则会打印更多的日志信息。设置 false 则只会输出 w、e 级别的日志。
        domainName: "https://ysj.dearweb.cn",//since5.0.0 开发者域名 以极光的DEMO域名为例
        success: function (data) {
            //TODO 初始化成功回调
            var verifyEnable = window.JVerificationInterface.checkVerifyEnable();
            console.log(verifyEnable, 'verifyEnable')
            if (!verifyEnable) {
                return;
            }
            window.JVerificationInterface.getToken({
                success: function (data) {
                    //TODO 获取 token 成功回调
                    var operater = data.operater;
                    var token = data.content;
                }, fail: function (data) {
                    //TODO 获取 token 失败回调
                    uni.showToast({
                        icon:"none",
                        title:"验证失败，请重新验证登录"
                    })
                    uni.navigateTo({
                        url: "/pages/login/mobileNumberLogin/index"
                    })
                }
            })
        },
        fail: function (data) {
            //TODO 初始化失败回调
        }
    });

}
const loginFn = (item) => {
    setAuthorization("active", 0)
    if (!state.isCheck) {
        uni.showToast({
            title: "请勾选协议",
            icon: "none",
            duration: 2000
        });
        return
    }
    getPhoneToken()
    // 登录成功
    // setAuthorization("active", 0)
    
}

const jumpFn = (item) => {
    let { url } = item
    uni.navigateTo({
        url: '/pages/webViewPage/index?id=' + url
    });
}

const jumpLoginFn = (item) => {
    let { url } = item
    uni.navigateTo({
        url,
    });
}

let loginPhone = ref()
let phone = getAuthorization("phoneNumber")
if (!phone) {
    uni.navigateTo({
        url: '/pages/login/mobileNumberLogin/index',
    });
}
onMounted(() => {
    let beforVal = phone.toString().substr(0, 3)
    let afterVal = phone.toString().substr(7, 11)
    loginPhone.value = beforVal + '****' + afterVal
})

</script>

<style lang="scss" scoped>
.login-box {
    position: relative;
    width: 100vw;
    height: 100vh;
    box-sizing: border-box;
    overflow: hidden;
}

.top-one-click-login-box {
    display: flex;
    justify-content: space-between;
    font-size: 32rpx;
    color: #262626;
    margin: 0 60rpx;
    font-weight: 100;
    margin-top: 30rpx;
    margin-bottom: 120rpx;
    color: #666;
}

.mobile-number {
    margin: 220rpx 60rpx 50rpx 60rpx;
    text-align: center;

    text {
        font-size: 48rpx;
        color: #262626;
    }

    view {
        font-size: 28rpx;
        color: #666666;
        margin-top: 10rpx;
        margin-bottom: 50rpx;
    }
}

.top-slogn-box {
    padding: 0 60rpx;
    font-size: 48rpx;
    text-align: left;
}

.mobile-login-btn {
    font-size: 40rpx;
    margin-bottom: 10rpx;
    width: calc(100vw - 120rpx);
}

.agreement-box {
    width: 100vw;
    display: flex;
    justify-content: center;
    margin-top: 10rpx;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 60rpx;

    .agreement-text {
        display: flex;
        align-items: flex-start;
        justify-content: center;
        font-size: 24rpx;

        img {
            width: 32rpx;
            height: 32rpx;
            margin-right: 10rpx;
            flex: none;
        }

        color: #999999;

        .text-box {
            color: #333;
        }
    }
}

.agreement-right {
    width: 70%;
    text-align: center;
}
</style>
